/*
 * @Author: Abmer
 * @Date:   2019-10-31 17:21:42
 * @Last Modified by:   Amber
 * @Last Modified time: 2019-11-02 08:54:14
 */

!layui.define(['jquery', 'form', 'layer'], function(exports) {
    var $ = layui.$
        , form = layui.form
        , layer = layui.layer;


    var format = function(str, arg) {
        return str.replace(/\{\w*\}/gi, arg);
    }

    var defaults = {
        elem: '#areabox'
        , firstId: 'provinceId'
        , render: function(opt, json) {
            var $sel = $('#' + opt.id).empty();
            $('<option>').val('').text(opt.prompt).appendTo($sel);
            var code = opt.code || 'code'
                , name = opt.name || 'name';
            $.each(json.data, function(i, d) {
                $('<option>').val(d[code]).text(d[name]).appendTo($sel);
            });
            var  defaultValue =$sel.prop('defaultValue')|| json.data[0][code];
            opt.defaultValue = json.data[0][code];
            $sel.val(opt.defaultValue);
            return true;
        }
        , children: {
            provinceId: {
                id: 'provinceId'
                , defaultValue: 'BJ'
                , prompt: '请选择省'
                , url: '/core/area/province'
                , code: 'code'
                , name: 'name'
                , next: 'cityId'
            }
            , cityId: {
                id: 'cityId'
                , prompt: '请选择市'
                , url: '/core/area/city/{}'
                , code: 'code'
                , name: 'name'
                , next: "countyId"
            }
            , countyId: {
                id: 'countyId'
                , prompt: '请选择县/区'
                , code: 'code'
                , name: 'name'
                , url: '/core/area/county/{}'
            }
        }
    };


    var holder = {
        init: function(options) {
            var config = this.config = $.extend(true, {}, defaults, options);
            var opt = config.children[config.firstId];
            opt._url = opt.url;
            this.bind();
            this.fetch(opt);
        }
        , bind: function() {
            form.on('select', function(data) {
                var id = data.elem.id;
                var nextId = holder.config.children[id].next;
                if (nextId) {
                    var child = holder.config.children[nextId];
                    child._url = format(child.url, data.value);
                    holder.fetch(child);
                }
            });
        }
        , fetch: function(opt) {
            var that = this;
            $.get(opt._url).fail(function(xhr) {
                console.log(xhr);
                layer.alert('[Fail] ' + xhr.status + ': ' + xhr.responseJSON.message);
            }).done(function(json) {
                if (json.code != 0) { //
                    return false;
                }
                that.config.render(opt, json);
                form.render('select');
                if (opt.next) {
                    var child = that.config.children[opt.next];
                    child._url = format(child.url, opt.defaultValue); //?
                    holder.fetch(child);
                }
            });
        }
    };

    exports('selectArea', holder);
});